<template>
  <div class="cu-select">
    <div class="select" @click="handleShow">
      <input type="text" readonly :placeholder="placeholder" :value="selectedText" />
      <div class="arrow"><van-icon :name="showPicker ? 'arrow-up' : 'arrow-down'" /></div>
    </div>
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
    </van-popup>
  </div>
</template>
<script>
export default {
  name: 'CuSelect',
  props: {
    placeholder: {
      type: String,
      default: '',
    },
    columns: {
      type: Array,
      default: () => [],
    },
    value: {
      type: [String, Number],
      default: '',
    },
  },
  data() {
    return {
      showPicker: false,
    };
  },
  computed: {
    selectedText() {
      const selected = this.columns.find((item) => item.value === this.value);
      if (selected) {
        return selected.text;
      } else {
        return '';
      }
    },
  },
  methods: {
    handleShow() {
      this.showPicker = true;
    },
    onConfirm(detail) {
      this.$emit('confirm', detail);
      this.showPicker = false;
    },
  },
};
</script>
<style lang="less" scoped>
.cu-select {
  .select {
    padding: 5px 38px 5px 12px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 2px;
    position: relative;
    background: #fff;
    input {
      height: 24px;
      line-height: 24px;
      width: 100%;
      outline: none;
      border: none;
      color: #999999;
      font-size: 12px;
    }
    .arrow {
      position: absolute;
      right: 12px;
      top: 12px;
      width: 14px;
      height: 14px;
      text-align: center;
      line-height: 14px;
      color: #999999;
    }
  }
}
</style>
